<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" class="name">
      <span>{{ msg }}</span>
      <p>{{arr }}</p>
      <span>{{ msg }}</span>
    </div>
    <script src="/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            msg: "hello world",
            arr: ["a", "b"],
          };
        },
      });
      // vm.arr.push("c");
      setTimeout(() => {
        vm.arr.push("c");
        // vm.msg = "****";
      }, 5000);
      // vm.arr.splice(1, 1, "d");
      //1.将数据变成响应式 initState（针对对象来说主要使用defineProperty 针对数组使用重写数组方法）
      //2.模板编译：将模板先转化成ast语法树，再转化成render函数
      //3.将render函数执行（会进行取值操作，产生虚拟Dom,通过render中_c('div',null, _v(name))出发get方法）
      //4.将虚拟Dom渲染成真实Dom
      //5.当数据发生变化时，会重新执行render函数，产生新的虚拟Dom，再次渲染成真实Dom
      // setTimeout(() => {
      //   vm.msg = "****";
      // }, 5000);
      // vm.msg = "****";
      // nextick不是创建了一个异步任务，而是放到队列中，按照顺序执行
      // 放到队列中是同步，执行是异步
      // nextick没有直接使用某个api
      // 而是采用优雅降级的方式，通过promise(ie不兼容） mutationObserver（h5的api） setImmediate(只有ie支持) setTimeout
      vm.$nextTick(() => {
        const app = document.getElementById("app");
        console.log(app.innerHTML);
      });

      Vue.mixin({
        created() {
          console.log("mixin created1");
        },
      });

      Vue.mixin({
        created() {
          console.log("mixin created2");
        },
      });

      console.log(Vue.options);
    </script>
  </body>
</html>
